<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日报管理系统</title>
    <style>
        .el-aside {
            text-align: center;
            background-color: #E7DEF8;
        }

        .el-main {
            text-align: center;
            line-height: 160px;
            background-color: #c189bd;
        }

        .workTable {
            line-height: 40px;
        }

        .workColumn {
            font-size: 24px;
        }

        .daypaper {
            width: 500px;
            height: 40vh;
            font-size: 24px;
        }

        .daypaperInfo {
            font-size: 30px;
            line-height: 70px;
            font-weight: bold;
        }

        .project {
            width: 500px;
            height: 400px;
            text-align: center;
            line-height: 30px;
            font-size: 30px;
            box-shadow: 1px 1px 5px 0px #888888;
        }

        .text {
            font-size: 23px;
        }
        hr{
            width: 400px;
            margin-left: 50px;
        }

        .item {
            margin-bottom: 18px;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }

        .clearfix:after {
            /*clear: both;*/
        }

        .box-card {
            width: 480px;
        }
    </style>
</head>
<body>
<div id="home-app">
    <div class="daypaper"> <span class="daypaperInfo">
                                日报信息
                            </span> <br/>
        <template>今日应收50，实收{{count}}</template>
    </div>
    <div class="project">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>正在进行的项目</span>
                <hr>
            </div>
            <template>
                <div v-for="o in tableData" :key="o.id" class="text item">
                    {{o.name }}
                </div>
            </template>

        </el-card>
    </div>
    <!--<el-table
            :data="tableData"
            class="workTable"
    >
        <el-table-column
                prop="name"
                label="正在进行的项目"
                class="workColumn"
        >
        </el-table-column>
    </el-table>-->
</div>

</body>
<script src="../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../plugins/axios/axios.min.js"></script>
<script src="../js/request.js"></script>
<script src="../api/project.js"></script>
<script src="../api/category.js"></script>


<script>
    new Vue({
        el: '#home-app',
        data() {
            return {
                tableData: [],
                count: 10,
            }
        },
        computed: {},
        async created() {
            await this.init();
            getCount().then(count1 => {
                // 这里的 count1 就是成功解析后的值
                this.count = count1;
                console.log('获取到的数值为：', count1);
            }).catch(error => {
                console.error('获取数值失败：', error);
            });
        },

        mounted() {
        },
        methods: {
            async init() {
                try {
                    const res = await getProject();
                    console.log('Response:', res); // 添加这行以查看响应
                    if (String(res.code) === '1') {
                        this.projectList = res.data || [];
                    } else {
                        this.$message.error('请求出错了：' + res.msg);
                    }
                } catch (err) {
                    console.error('请求出错了：', err);
                    this.$message.error('请求出错了：' + err);
                }
                this.tableData = this.projectList;
                console.log(this.tableData); // 添加这行以查看响应
            },

        }
    })
</script>

</html>